<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        p{
            width:0;
            overflow: hidden;
            background: #999;
        }
    </style>
</head>
<body>
    <input type="file" id="input">
    <input type="button" id="btn" value="上传">
    <div>
        <progress id="bar" value="0" max="100"></progress>
        <p id="op">0%</p>
    </div>
    <script>
        btn.onclick = function () {
            //console.log( files.value );
            //console.log( input.files[0] );
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                
            };
            var oUpload = xhr.upload;
            //console.log(oUpload);
            oUpload.onprogress = function (e) {
                //console.log( '当前进度：'+ e.loaded+ '   总进度：'+e.total );

                var  scale = e.loaded / e.total;
                bar.value = scale *(bar.max);
                op.style.width = scale *(bar.max) + 'px';
                op.innerHTML = (scale *(bar.max)).toFixed(2) + '%';
            };
            xhr.open('post','postFile.php',true);
            xhr.setRequestHeader('X-Request-width','XMLHttpRequest');

            var oFormData = new FormData();
            oFormData.append('file',input.files[0]);
            xhr.send(oFormData);
        };
    </script>
</body>
</html>